<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/swiper.css" />
        <link rel="stylesheet" href="css/mint.css">
    </head>
        <script src="js/serverUrl.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/mint.js"></script>
        <script src="js/moment.js"></script>
        <style type="text/css">
            .resultInfoContainer{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100vw;
                height: 35vw;
                color: white;
                background-color: #C7000A;
            }
            .operationContainer{
                display: flex;
            }
            .operationItem{
                flex: 1;
                background-color: #C7000A;
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                padding-top: 1vw;
                padding-bottom: 2vw;
            }
        </style>
    <body style="background-color: white;">
        <div id="app">
            <div class="resultInfoContainer">
                <div style="font-size: 4vw;">本次考试得分</div>
                <div style="font-size: 7vw; margin-top: 3vw;">{{examPaper.correctScore}}</div>
            </div>
            <div class="operationContainer">
                <div class="operationItem">
                    <div style="font-size: 3.5vw;">正确数</div>
                    <div style="font-size: 4vw; margin-top: 1vw;">{{examPaper.correct}}</div>
                </div>
                <div class="operationItem">
                    <div style="font-size: 3.5vw;">错误数</div>
                    <div style="font-size: 4vw; margin-top: 1vw;">{{examPaper.uncorrect}}</div>
                </div>
                <div class="operationItem">
                    <div style="font-size: 3.5vw;">未答数</div>
                    <div style="font-size: 4vw; margin-top: 1vw;">{{examPaper.unanswer}}</div>
                </div>
                <div class="operationItem">
                    <div style="font-size: 3.5vw;">总题数</div>
                    <div style="font-size: 4vw; margin-top: 1vw;">{{examPaper.total}}</div>
                </div>
                <div class="operationItem" @click.stop="toAnswerList()">
                    <div style="font-size: 3.5vw;">答题卡</div>
                </div>
            </div>
        </div>
    </body>
    
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data:{
              examPaper:{}
          },
          created() {
              window.getExamPaper = this.getExamPaper
          },
          methods:{
              getExamPaper (paper){
                  this.examPaper = paper
              },
              toAnswerList (){
                   WebViewJavascriptBridge.callHandler('toAnswerSheet',{});
              }
          }
        })
        </script>
</html>
